<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<form action="">
    <div class="form-group-lg has-success">
        <label class="control-label  ">username</label>
        <input type="text" class="form-control col-md-9">
    </div>
    <div class="form-group">
        <label class="control-label sr-only">12</label>
        <div class="input-group">
            <div class="input-group-addon">@</div>
                <input type="text" class="form-control" placeholder="username">
            <div class="input-group-addon">.com</div>
        </div>
    </div>


    <div class="form-group has-success has-feedback">
        <label for="inputSuccess2" class="control-label">input with success</label>
        <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
        <!--aria-hidden 为了让那些屏幕识别装备 将其识别为其他内容（但是我们的目的是纯粹的当作 图标使用的，）-->
        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        <span id="inputSuccess2Status" class="sr-only">(success)</span>
    </div>
    <!--其实我们目前设计的网站不需要考虑残疾人的想法，所以 aria类的就不需要。。。
    因为aria就是为了增强体验，能够让辅助设备能够识别这个图标（而不是将其识别成其他的文件）。就是让残疾人和我们有相同的体验
    -->
    <!--has-feedback 这个类就是能够让图标添加指定的输入框中 -->
    <div class="form-group has-feedback">
        <label for="labelwarn" class="control-label">input with warn</label>
        <input type="text" class="form-control" id="labelwarn">
        <!--form-control-feedback 说明吧这个图标放到这个input框中。另外两个类 是使用图标的类-->
        <span class="glyphicon glyphicon-plus form-control-feedback" aria-hidden="true"></span>
    </div>


</form>
<!--内联的表单 水平排列的表单-->
<form action="" class="form-horizontal">
    <div class="form-group has-feedback has-error">
        <label for="iUsername" class="col-md-2 control-label">username</label>
        <div class="col-md-9">
            <input type="text" class="form-control" id="iusername">
            <span class="glyphicon glyphicon-adjust form-control-feedback"></span>
        </div>
        <div class="col-md-1"></div>
    </div>
    <div class="form-group has-feedback has-success">
        <label for="iMoney" class="control-label col-md-2">money</label>
        <div class="col-md-9">
            <div class="input-group">
                <div class="input-group-addon">$</div>
                <input type="text" class="form-control" id="imoney">
                <div class="input-group-addon">.00</div>
            </div>

        </div>
        <div class="col-md-1"></div>
    </div>


</form>
</body>
</html>